<template>
  <div class="Classlist-panel-code">
    <span class="span-text">班级邀请码</span>
    <span class="span-shu"></span>
    <span class="span-value" id="copyEle">
      {{ State.TeacherCode === 0 || State.TeacherCode ? State.TeacherCode : "" }}
    </span>
    <div class="code-btn" v-if="State.TeacherCode" @click="CodeCopy(State.TeacherCode)">
      <span>复制</span>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, watch, toRef, toRefs } from "vue";
import { ElMessage } from 'element-plus'
import useClipboard from 'vue-clipboard3'
export default defineComponent({
  name: "TeacherClassCode",
  components: {},
  props: {
    TeacherCode: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    let State = reactive({
      TeacherCode: '',
    })
    //赋值班级码
    function CodeCopy(TeacherCode) {
      let { toClipboard } = useClipboard()
      toClipboard(TeacherCode)
      ElMessage({
        message: '复制成功:' + TeacherCode,
        type: 'success',
      })
    }
    //监听传过来的值
    watch(() => props.TeacherCode, (val, old) => {
      if (val !== old) {
        State.TeacherCode = props.TeacherCode
      }
    },
      { deep: true }
    )
    return {
      State,
      CodeCopy,
    };
  },
});
</script>
<style lang="less">
.Classlist-panel-code {
  position: absolute;
  width: 540px;
  height: 120px;
  background: #ffffff;
  border-radius: 16px;
  left: 520px;
  top: 280px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.Classlist-panel-code .span-text {
  position: absolute;
  left: 40px;
  top: 50px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #81859c;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
}

// “|”的显示
.Classlist-panel-code .span-shu {
  // margin-left: 10px;
  position: absolute;
  left: 154px;
  top: 60px;
  width: 1PX;
  height: 12px;
  background: linear-gradient(0deg, #0974d8, #3d8ef1, #7c7ff8);
}

//控制字的显示
.Classlist-panel-code .span-value {
  position: absolute;
  left: 170px;
  top: 38px;
  padding-bottom: 5px;
  font-size: 36px;
  font-family: Arial;
  font-weight: 400;
  user-select: none;
  background: linear-gradient(-90deg,
      #0974d8 0%,
      #3d8ef1 39.990234375%,
      #7c7ff8 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

.Classlist-panel-code .code-btn {
  position: absolute;
  top: 50px;
  right: 140px;
  width: 10%;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 243, 245, 0.5);
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  color: #a2a5b5;
  cursor: pointer;
  border-radius: 5px;
}
</style>
